<template>
  <div class="head">
    <div class="tou">
      <img src="../../assets/images/touxiang.svg" alt="" />
    </div>
    <div class="wen">
      <p class="deng">{{ mingz }}</p>
    </div>
    <div class="tuichu" v-if="mingz" @click="loginout">
      退出登录
    </div>
  </div>
  <div class="center">
    <div @click="toAccount">
      <img src="../../assets/images/card.svg" alt="" />
      <p>银行卡</p>
    </div>
    <div @click="toDeposit">
      <img src="../../assets/images/zhuang.svg" alt="" />
      <p>我的存款</p>
    </div>
    <div @click="toSubscribe">
      <img src="../../assets/images/jiao.svg" alt="" />
      <p>我的预约</p>
    </div>
    <div @click="toDebit">
      <img src="../../assets/images/money.svg" alt="" />
      <p>我的贷款</p>
    </div>
  </div>
  <div class="bottom">
    <div class="shang">
      <p>
        总资产（元）<i
          :class="
            passwordType === 'password' ? 'el-icon-close' : 'el-icon-view'
          "
          @click="changeType"
        ></i>
      </p>
      <p v-if="passwordType === 'password'"><strong>***</strong></p>
      <p v-else>
        <strong>{{ total }}</strong>
      </p>
    </div>
    <div class="xia">
      <div>
        <p>活期</p>
        <p v-if="passwordType === 'password'">***</p>
        <p v-else>{{ huoqi }}</p>
      </div>
      <div>
        <p>存款</p>
        <p v-if="passwordType === 'password'">***</p>
        <p v-else>{{ cun }}</p>
      </div>
      <div>
        <p>理财</p>
        <p v-if="passwordType === 'password'">***</p>
        <p v-else>--</p>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { allAccount } from "@/api/account";
import { queryOrders } from "@/api/orders";
import { theProduct } from "@/api/product";
export default {
  setup() {
    const state = reactive({
      passwordType: "text",
      mingz: "",
      total: 0,
      huoqi: 0,
      cun: 0,
      accountList: [],
      ordersList: [],
      tempList: [],
    });
    state.mingz = localStorage.getItem("userName");
    const changeType = () => {
      if (state.passwordType === "password") {
        state.passwordType = "text";
      } else {
        state.passwordType = "password";
      }
    };
    const router = useRouter();
    const toAccount = () => {
      router.push("/account");
    };
    const toDebit = () => {
      router.push("/debit");
    };
    const toDeposit = () => {
      router.push("/deposit");
    };
    const toSubscribe = () => {
      router.push("/subscribe");
    };
    const initMy = async () => {
      let res = await allAccount(localStorage.getItem("userID"));
      console.log(res);
      for (let item of res.data) {
        state.accountList.push(item.id);
        state.huoqi += item.money;
      }
      console.log(state.accountList);
      for (let i of state.accountList) {
        res = await queryOrders(i);
        for (let it of res.data) {
          state.ordersList.push(it);
        }
      }

      for (let ite of state.ordersList) {
        if (ite.is_deal === true && ite.is_pay === true)
          state.tempList.push(ite.product);
      }
      for (let ii of state.tempList) {
        res = await theProduct(ii);
        for (let iit of res.data) {
          state.cun += iit.money;
        }
      }
      state.total = state.huoqi + state.cun;
    };
    initMy();
    const loginout = () => {
      router.push("/login");
    };
    return {
      ...toRefs(state),
      changeType,
      toAccount,
      toDebit,
      toDeposit,
      toSubscribe,
      loginout,
    };
  },
};
</script>
<style scoped>
.head {
  width: 100%;
  height: 200px;
  display: flex;
  background: rgba(240, 249, 235, 0.7);
}
.tuichu {
  position: absolute;
  top: 20px;
  right: 20px;
}
.tou {
  width: 70px;
  height: 70px;
  margin-top: 20px;
  margin-left: 5%;
}
.wen {
  width: auto;
  height: 70px;
  margin-top: 20px;
  margin-left: 5%;
  line-height: 70px;
  text-align: center;
  font-weight: bolder;
  font-size: 18px;
}
.deng {
  color: #000;
  font-size: 18px;
}
.center {
  width: 80%;
  height: 100px;
  display: flex;
  margin: -50px auto 0;
  justify-content: space-around;
  align-items: center;
  border: 1px solid #efefef;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 8px #fff, 0 5px 13px rgb(0 0 0 / 7%);
}
.center p {
  margin-top: 5px;
}
.bottom {
  width: 80%;
  height: 150px;
  margin: 20px auto;
  background: -webkit-linear-gradient(
    left top,
    #b3e19d,
    #529b2e
  ); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(
    bottom right,
    #b3e19d,
    #529b2e
  ); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(
    bottom right,
    #b3e19d,
    #529b2e
  ); /* Firefox 3.6 - 15 */
  background: linear-gradient(
    to bottom right,
    #b3e19d,
    #529b2e
  ); /* 标准的语法 */
  border-radius: 15px;
  color: #fff;
}
.shang {
  width: 200px;
  padding-top: 20px;
  padding-left: 10px;
  text-align: left;
}
.xia {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  padding-left: 10px;
  padding-right: 10px;
}
</style>
